<template>
	<view class="wrap">
		<image class="login_logo" src="/static/new_images/logo.png"></image>
		<view class="form_item">
			<view class="form_item_value">
				<text class="cuIcon-mobile" style="margin-right:15rpx;color:#7E7E7E;"></text>
				<u-input v-model="phone" type="text" maxlength="40" :placeholder="$t('qsryxdz')" @blur="VerifyName" />
			</view>
		</view>
		<view class="form_item">
			<view class="form_item_value">
				<text class="cuIcon-lock" style="margin-right:15rpx;color:#7E7E7E;"></text>
				<u-input
					class="form-item-input"
					type="password"
					v-model="password"
					maxlength="20"
					:clearable="false"
					:placeholder="$t('qsrdlmm')"
				/>
			</view>
		</view>
		<view class="form_item">
			<view class="form_item_value">
				<!-- <u-icon name="yanzhengma" custom-prefix="custom-icon" size="46" style="margin-right:10rpx;color:#767676;"></u-icon> -->
				<text class="cuIcon-command" style="margin-right:15rpx;color:#7E7E7E;"></text>
				<u-input v-model="verImgcode" type="text" maxlength="10" :clearable="false" :placeholder="$t('qsrtxyzm')" />
				<view class="canvas-img-code" @click="refresh()">
					<canvas :style="{ width: width + 'px', height: height + 'px' }" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
				</view>
			</view>
		</view>
		<!-- <view class="form_mall"><text>使用邮箱登录</text></view> -->
		<view class="form_btn" @tap="login">{{$t('ljdl')}}</view>
		<view class="find-password"><text @tap="toPage('/pages/User/Personal/AccessCode/details/details')">{{$t('wjmm')}}</text></view>
		<view class="form_Register">
			{{$t('hmyzh')}}
			<text class="form_Register_text" @tap="toPage('/pages/Login/Register')">{{$t('qzhuce')}}</text>
		</view>
		<u-select :cancelText="$t('quxiao')" :confirmText="$t('queren')" v-model="selectShow" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '', // 手机号
			password: '', // 密码
			imgcode: '', // 图形验证码
			verImgcode: '', // 输入图形验证码
			width: 120,
			height: 30,
			PssSwitch: false,
			selectShow: false,
			label: this.$t('zhongguo'),
			list: [
				{
					value: '1',
					label: this.$t('zhongguo')
				}
			]
		};
	},
	onShow() {
		uni.hideLoading();
		let that = this;
		setTimeout(function() {
			that.init();
		}, 1000);
	},
	methods: {
		VerifyName(e) {
			console.log(e);
			this.phone = e;
		},
		VerifyCode(e) {
			this.verImgcode = e;
			if (this.verImgcode.toUpperCase() != this.imgcode.toUpperCase()) return this.$utils.toast(this.$t('qsyzqyzm'));
		},
		// 登录
		login() {
			let reg = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$');
			if (this.$u.test.isEmpty(this.phone)) return this.$utils.toast(this.$t('qsryxdz'));
			if (!this.verImgcode) return this.$utils.toast(this.$t('qsryzm'));
			if (this.verImgcode.toUpperCase() != this.imgcode.toUpperCase()) return this.$utils.toast(this.$t('qsyzqyzm'));
			this.$utils.loading(this.$t('zzdlz'));
			this.$api.loginApi  
				.login({
					account: this.phone,
					password: this.password
				})
				.then(res => {
					this.$utils.toast(this.$t('dlcg'));
					this.$store.commit('login', res.data);
					uni.switchTab({
						url: '/pages/index/index'
					});
				});
		},
		confirm(e) {
			console.log(e[0].label);
			this.label = e[0].label;
		},
		toPage(link) {
			uni.navigateTo({
				url: link
			});
		},
		// 初始化验证码
		init: function() {
			console.log('start');
			var context = uni.createCanvasContext('imgcanvas', this),
				w = this.width,
				h = this.height;
			context.setFillStyle('white');
			context.setLineWidth(5);
			context.fillRect(0, 0, w, h);
			var pool = [
					'A',
					'B',
					'C',
					'D',
					'E',
					'F',
					'G',
					'H',
					'I',
					'J',
					'K',
					'L',
					'I',
					'M',
					'N',
					'O',
					'P',
					'Q',
					'R',
					'S',
					'T',
					'U',
					'V',
					'W',
					'S',
					'Y',
					'Z',
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'0'
				],
				str = '';
			for (var i = 0; i < 4; i++) {
				var c = pool[this.rn(0, pool.length - 1)];
				var deg = this.rn(-30, 30);
				context.setFontSize(18);
				context.setTextBaseline('top');
				context.setFillStyle(this.rc(80, 150));
				context.save();
				context.translate(30 * i + 15, parseInt(h / 1.5));
				context.rotate((deg * Math.PI) / 180);
				context.fillText(c, -15 + 5, -12);
				context.restore();
				str += c;
			}
			this.imgcode = str;
			for (var i = 0; i < 40; i++) {
				context.beginPath();
				context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
				context.closePath();
				context.setFillStyle(this.rc(150, 200));
				context.fill();
			}
			context.draw();
			console.log('end');
		},
		rc: function(min, max) {
			var r = this.rn(min, max);
			var g = this.rn(min, max);
			var b = this.rn(min, max);
			return 'rgb(' + r + ',' + g + ',' + b + ')';
		},
		rn: function(max, min) {
			return parseInt(Math.random() * (max - min)) + min;
		},
		refresh: function() {
			this.init();
		},
		canvasIdErrorCallback: function(e) {
			console.error(e.detail.errMsg);
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 0rpx 60rpx;
	color: $tom-text-color;
	overflow: auto;
	position: relative;
	background-image: url('/static/new_images/login-bg.png');
	background-position: left top;
	background-size: 100% 100%;
	.login_logo {
		width: 140rpx;
		height: 140rpx;
		margin: 90px auto 80rpx auto;
	}
	.login_title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}
	.login_title2 {
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}
	.login_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0rpx;
	}
	.form_item {
		.form_item_value {
			background:#fff;
			border: 2rpx solid #fff;
			color:#333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 20rpx;
			margin-bottom: 40rpx;
			border-radius: 10rpx;
			.canvas-img-code {
				color: $text-color;
				font-size: 28rpx;
				margin-right: -16rpx;
			}
		}
		.form_item_tips {
			font-size: 28rpx;
			text-align: right;
			margin-top: 10rpx;
		}
	}
	.form_mall {
		color: $text-color;
		font-size: 28rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	.form_btn {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		color: $text-color;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 10rpx;
		margin: 90rpx auto 30rpx auto;
	}
	.form_Register {
		position: absolute;
		bottom: 80rpx;
		text-align: center;
		width: 100%;
		left: 0;
		color:#fff;
		.form_Register_text {
			color: #fff;
			font-size: 28rpx;
			font-weight:800;
			text-decoration: underline;
		}
	}
}
.find-password{
	width: 100%;
	height: 80rpx;
	background-color: #fff;
	color: $text-color;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 32rpx;
	border-radius: 10rpx;
	margin: 0 auto 30rpx auto;
}
</style>
